<template>
    <div class="regist">
        <van-nav-bar title="注册" left-arrow @click-left="onClickLeft" />
        <!-- vuex:{{ $store.state.num }} -->
        <div class="middle">
            <img src="../../assets/logo.png" alt="">
        </div>
        <van-form @submit="goLogin">
            <van-cell-group inset>
                <van-field v-model="phone" name="手机号" label="手机号" placeholder="请输入手机号"
                    :rules="[{ required: true, message: '请填写手机号' }]" />
                <van-field v-model="sms" center clearable label="验证码" placeholder="请输入短信验证码"
                    :rules="[{ required: true }]">
                    <template #button>
                        <div class="smsBtn">
                            <van-button @click="smsBtn" type="primary">发送验证码</van-button>
                        </div>
                    </template>
                </van-field>
                <van-field v-model="password" type="password" name="密码" label="密码" placeholder="请输入密码"
                    :rules="[{ required: true, message: '请填写密码' }]" />
                <van-field v-model="invitationCode" label="邀请码" placeholder="请输入邀请码" />
            </van-cell-group>
            <van-field class="checkBox" name="checkbox" :rules="[{ required: true, message: '请同意协议' }]">
                <template #input>
                    <van-checkbox v-model="checked" label-disabled>请您阅读并同意
                        <a href="#">用户协议</a>
                        和
                        <a href="#">隐私政策</a>
                        及 <a href="#">用户个人信息保护政策</a>
                    </van-checkbox>
                </template>
            </van-field>
            <div>
                <van-button round block type="primary" native-type="submit">
                    注册
                </van-button>

                <van-button class="codeLg" round block type="primary" @click="goLogin3">
                    下载
                </van-button>
            </div>
        </van-form>
    </div>
</template>
<script lang="ts" setup="props">
import { ref, onMounted } from 'vue';
import { useRouter, useRoute } from "vue-router";
import { regist, smSend } from '../../api/index'
import { Toast } from 'vant'
const router = useRouter();
const route = useRoute();
const phone = ref('');
const sms = ref('');
const password = ref('');
const invitationCode = ref('');
const checked = ref(false);
let formData = new FormData();

const goLogin = () => {
    formData.append("mobile", phone.value);
    formData.append("password", password.value);
    formData.append("code", sms.value);
    formData.append("invate_code", invitationCode.value);
    regist(formData).then(res => {
        if (res.code == 1) {
            Toast(res.msg)
            router.push("/login");
        } else {
            Toast(res.msg)
        }
    })
    formData = new FormData();
};
const onClickLeft = () => history.back();
const smsBtn = () => {
    formData.append("mobile", phone.value)
    formData.append("event", "register")
    smSend(formData).then(res => {
        console.log(res)
        Toast(res.msg)
    })
};
onMounted(() => {
    // console.log(route.query.invate_code)
    window.localStorage.removeItem("accessToken");
    invitationCode.value = route.query.invate_code;
    // const url = new URL(window.location.href);
    // console.log(url)
    // // var url = "http://localhost:4000/#/regist?a=123";

    // // 使用URLSearchParams解析查询字符串
    // var params = new URLSearchParams(url.split('?')[1]);

    // // 获取参数a的值
    // var aValue = params.get('a');

    // console.log(aValue);
})

const goLogin3 = () => {
    router.push({
        path: window.open('https://app.changgongwang.com/hqsm.apk')
    })
};

</script>
<style lang="less" scoped>
@import url(../../style/common.css);

.regist {
    background: #F6F7F9;
    width: 100%;
    height: 100vh;

    .van-nav-bar {
        height: 52px;
    }
}

:deep(.van-nav-bar__left .van-badge__wrapper) {
    color: #272635;
}


.middle {
    width: 200px;
    height: 124px;
    // background: #D8D8D8;
    font-size: 30px;
    // color: #3D3D3D;
    margin: 40px auto 30px;
    // line-height: 124px;
    // border-radius: 100%;
    display: flex;
    align-items: center;
    justify-content: center;

    img {
        width: 100px;
        height: 100px
    }
}

.van-form {
    // width: 345px;
    height: 101px;
    box-sizing: border-box;
    margin: 0 15px;
    background: none;

    .van-cell-group {
        border-radius: 10px 10px 10px 10px;

        .van-field {
            border-radius: 10px 10px 10px 10px;
            height: 54px;
        }
    }

    .van-button {
        box-sizing: border-box;
        margin-top: 16px;
        width: 100%;
        height: 44px;
        border-radius: 347px 347px 347px 347px;
    }

    :deep(.van-field__button) {

        // height: 24px;
        .smsBtn {
            position: relative;
            display: flex;
            align-items: center;
            padding-bottom: 14px;
            box-sizing: border-box;

            .van-button {
                // position: absolute;
                // top: 0;
                // left:0;
                // transform: translate(-50%, -50%);
                // margin-bottom: 10px;
                width: 80px;
                height: 24px;
                white-space: nowrap;
                background: linear-gradient(143deg, #0A84FF 0%, #0A7EF3 100%);
                border-radius: 347px 347px 347px 347px;
                font-size: 12px;
                color: #FFFFFF;
            }
        }
    }


    .codeLg {
        box-sizing: border-box;
        background: #232323;
        margin: 10px 0;
    }

    :deep(.checkBox) {
        background: none;
    }
}
</style>